import Taro,{useReady,useRouter} from '@tarojs/taro'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import { View, Picker } from '@tarojs/components'
import './launchServerDetail.less'
import React, { useState,useEffect } from 'react'
import { AtList, AtListItem, AtButton } from 'taro-ui'
import "taro-ui/dist/style/components/list.scss";

function LaunchServerDetail() {
    const handleClick = (e) => {
        console.log(e)
    }

    const state2 = {
        selector: ['美国', '中国', '巴西', '日本'],
        // selectorChecked: '美国',
        timeSel: '12:01',
        dateSel: '2018-04-22'
    }
    const [selectorChecked, setSelectorChecked] = useState('美国');
    const onChange = e => {
        console.log(state2.selector[e.detail.value]);
        setSelectorChecked(state2.selector[e.detail.value])
    }
    
    // 传参
    const router = useRouter();
    const [serviceArr, setServiceArr] = useState({});
    // 首次显示页面，页面加载完成，只渲染加载的那一次
    useReady(() => {
        setServiceArr(JSON.parse(router.params.value));
    })

    return <View className="launchServerDetailBox">
        {/* 收转人 */}
        {/* <View className="billPeople">
            <Text>收转人</Text>
            <Text>请选择 ></Text>
        </View> */}

        <AtList hasBorder={false}>
            <AtListItem title='服务类型' hasBorder={false} extraText={serviceArr.name} />
        </AtList>

        <View>
            <Picker mode='selector' range={state2.selector} onChange={onChange}>
                <AtList hasBorder={false}>
                    <AtListItem title='服务用户' onClick={handleClick} arrow='right' hasBorder={false} extraText={selectorChecked} />
                </AtList>
            </Picker>
        </View>
        <View>
            <Picker mode='selector' range={state2.selector} onChange={onChange}>
                <AtList hasBorder={false}>
                    <AtListItem title='服务地址' onClick={handleClick} arrow='right' hasBorder={false} extraText={selectorChecked} />
                </AtList>
            </Picker>
        </View>
        <View>
            <Picker mode='selector' range={state2.selector} onChange={onChange}>
                <AtList hasBorder={false}>
                    <AtListItem title='服务时间' onClick={handleClick} arrow='right' hasBorder={false} extraText={selectorChecked} />
                </AtList>
            </Picker>
        </View>
        <View>
            <Picker mode='selector' range={state2.selector} onChange={onChange}>
                <AtList hasBorder={false}>
                    <AtListItem title='服务费用' onClick={handleClick} arrow='right' hasBorder={false} extraText='请选择' />
                </AtList>
            </Picker>
        </View>
       
        {/* 确定按钮 */}
        <View className="severBtn">
            <AtButton type='primary' circle full>提交</AtButton>
        </View>

    </View>
}

export default LaunchServerDetail;